<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
router-link标签
作用：在切换路由时可以自动给路由路径加入#不需要手动加入。
属性：
    to:书写路由路径
    tag:将router-link渲染成指定的标签，无论渲染成什么都会自动加上单击事件
<div id="app">
    <!--router-link标签：书写路由路径不需要写#号，使用to属性写路由路径-->
    <router-link to="/login" tag="button">点我登录</router-link>
    <router-link to="/register" tag="span">点我注册</router-link>
    <!--路由组件-->
    <router-view></router-view>
</div>
<script>
    //1.创建组件对象
    let login = {
        template: "<h1>登录</h1>"
    };
    let register = {
        template: "<h1>注册</h1>"
    };
    //2.创建路由对象
    let router = new VueRouter({
        routes: [
            //{path: '/',component: login},//指定默认路由
            {path: '/',redirect:'/login'},//也可使用这种方式，重定向到指定的路由路径(推荐)
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    });

    let app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: router
    });
</script>
</body>
</html>